
<style scoped>
    .hello{
        border:1px solid #ddd;
        padding:5px;
        text-align: left;
    }
    .textcontant .tittle{
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .contain{
        padding-left: 2px;
    }
    .contain .list{
        border-bottom:1px solid #ddd;
        cursor: pointer;
    }
    /*  TAB 标签栏  */
    .tittle ul{
        margin-bottom:5px;
    }
    .tittle ul li{
        float: left;
        overflow: hidden;
        cursor: pointer;
        padding: 5px 10px;
    }
    .tittle ul .checkedtab{
        /* border:1px solid #ddd; */
        border-bottom: 2px solid green;
        background: #f1f1f1;
    }
</style>

<template>
    <div class="hello">
        <div class="textcontant">
            <div class="tittle">
                <div>
                    <ul>
                        <li v-for="item in textlist.tittle" @click="changetab(item.key)" :class="['tab',selecttab==item.key?'checkedtab':'']">
                            {{item.name}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="contain">
                <div class="list" v-for="item in textlist.xinwen" @click="godetail(item.id)">
                    {{item.tit}} --{{item.time | datetime}}
                </div>
            </div>
        </div>
        价格{{price|formatMoney}}


        <Tabs>
            <Tab-pane label="标签一">标签一的内容</Tab-pane>
            <Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>
            <Tab-pane label="标签三">标签三的内容</Tab-pane>
        </Tabs>
    </div>
</template>

<script>
export default {
    data () {
        return {
            price:95,
            selecttab:"",
            textlist:{
                tittle:[
                    {
                        name:"新闻",
                        key:"first",
                    },
                    {
                        name:"娱乐",
                        key:"second"
                    }
                    ],
                xinwen:[
                {
                    id:"0000001",
                    tit:"第一篇文章",
                    author:"作者编号111",
                    time:1516296853000
                },{
                    id:"0000002",
                    tit:"第二篇文章",
                    author:"作者编号222",
                    time:1516296853000
                },{
                    id:"0000003",
                    tit:"第一篇文章",
                    author:"作者编号222",
                    time:1516296853000
                }
            ]}
        }
    },
    methods: {
        godetail(id){
            console.log(id)
        },
        changetab(key){
            console.log(key);
            this.selecttab = key;
        }
    },

}
</script>

